--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js"><div id="cls-Ext.ux.Spinner"></div>/**\r
+ * @class Ext.ux.Spinner\r
+ * @extends Ext.util.Observable\r
+ * Creates a Spinner control utilized by Ext.ux.form.SpinnerField\r
+ */\r
+Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {\r
+ incrementValue: 1,\r
+ alternateIncrementValue: 5,\r
+ triggerClass: 'x-form-spinner-trigger',\r
+ splitterClass: 'x-form-spinner-splitter',\r
+ alternateKey: Ext.EventObject.shiftKey,\r
+ defaultValue: 0,\r
+ accelerate: false,\r
+\r
+ constructor: function(config){\r
+ Ext.ux.Spinner.superclass.constructor.call(this, config);\r
+ Ext.apply(this, config);\r
+ this.mimicing = false;\r
+ },\r
+\r
+ init: function(field){\r
+ this.field = field;\r
+\r
+ field.afterMethod('onRender', this.doRender, this);\r
+ field.afterMethod('onEnable', this.doEnable, this);\r
+ field.afterMethod('onDisable', this.doDisable, this);\r
+ field.afterMethod('afterRender', this.doAfterRender, this);\r
+ field.afterMethod('onResize', this.doResize, this);\r
+ field.afterMethod('onFocus', this.doFocus, this);\r
+ field.beforeMethod('onDestroy', this.doDestroy, this);\r
+ },\r
+\r
+ doRender: function(ct, position){\r
+ var el = this.el = this.field.getEl();\r
+ var f = this.field;\r
+\r
+ if (!f.wrap) {\r
+ f.wrap = this.wrap = el.wrap({\r
+ cls: "x-form-field-wrap"\r
+ });\r
+ }\r
+ else {\r
+ this.wrap = f.wrap.addClass('x-form-field-wrap');\r
+ }\r
+\r
+ this.trigger = this.wrap.createChild({\r
+ tag: "img",\r
+ src: Ext.BLANK_IMAGE_URL,\r
+ cls: "x-form-trigger " + this.triggerClass\r
+ });\r
+\r
+ if (!f.width) {\r
+ this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());\r
+ }\r
+\r
+ this.splitter = this.wrap.createChild({\r
+ tag: 'div',\r
+ cls: this.splitterClass,\r
+ style: 'width:13px; height:2px;'\r
+ });\r
+ this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();\r
+\r
+ this.proxy = this.trigger.createProxy('', this.splitter, true);\r
+ this.proxy.addClass("x-form-spinner-proxy");\r
+ this.proxy.setStyle('left', '0px');\r
+ this.proxy.setSize(14, 1);\r
+ this.proxy.hide();\r
+ this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {\r
+ dragElId: this.proxy.id\r
+ });\r
+\r
+ this.initTrigger();\r
+ this.initSpinner();\r
+ },\r
+\r
+ doAfterRender: function(){\r
+ var y;\r
+ if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {\r
+ this.el.position();\r
+ this.el.setY(y);\r
+ }\r
+ },\r
+\r
+ doEnable: function(){\r
+ if (this.wrap) {\r
+ this.wrap.removeClass(this.field.disabledClass);\r
+ }\r
+ },\r
+\r
+ doDisable: function(){\r
+ if (this.wrap) {\r
+ this.wrap.addClass(this.field.disabledClass);\r
+ this.el.removeClass(this.field.disabledClass);\r
+ }\r
+ },\r
+\r
+ doResize: function(w, h){\r
+ if (typeof w == 'number') {\r
+ this.el.setWidth(this.field.adjustWidth('input', w - this.trigger.getWidth()));\r
+ }\r
+ this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());\r
+ },\r
+\r
+ doFocus: function(){\r
+ if (!this.mimicing) {\r
+ this.wrap.addClass('x-trigger-wrap-focus');\r
+ this.mimicing = true;\r
+ Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {\r
+ delay: 10\r
+ });\r
+ this.el.on('keydown', this.checkTab, this);\r
+ }\r
+ },\r
+\r
+ // private\r
+ checkTab: function(e){\r
+ if (e.getKey() == e.TAB) {\r
+ this.triggerBlur();\r
+ }\r
+ },\r
+\r
+ // private\r
+ mimicBlur: function(e){\r
+ if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {\r
+ this.triggerBlur();\r
+ }\r
+ },\r
+\r
+ // private\r
+ triggerBlur: function(){\r
+ this.mimicing = false;\r
+ Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);\r
+ this.el.un("keydown", this.checkTab, this);\r
+ this.field.beforeBlur();\r
+ this.wrap.removeClass('x-trigger-wrap-focus');\r
+ this.field.onBlur.call(this.field);\r
+ },\r
+\r
+ initTrigger: function(){\r
+ this.trigger.addClassOnOver('x-form-trigger-over');\r
+ this.trigger.addClassOnClick('x-form-trigger-click');\r
+ },\r
+\r
+ initSpinner: function(){\r
+ this.field.addEvents({\r
+ 'spin': true,\r
+ 'spinup': true,\r
+ 'spindown': true\r
+ });\r
+\r
+ this.keyNav = new Ext.KeyNav(this.el, {\r
+ "up": function(e){\r
+ e.preventDefault();\r
+ this.onSpinUp();\r
+ },\r
+\r
+ "down": function(e){\r
+ e.preventDefault();\r
+ this.onSpinDown();\r
+ },\r
+\r
+ "pageUp": function(e){\r
+ e.preventDefault();\r
+ this.onSpinUpAlternate();\r
+ },\r
+\r
+ "pageDown": function(e){\r
+ e.preventDefault();\r
+ this.onSpinDownAlternate();\r
+ },\r
+\r
+ scope: this\r
+ });\r
+\r
+ this.repeater = new Ext.util.ClickRepeater(this.trigger, {\r
+ accelerate: this.accelerate\r
+ });\r
+ this.field.mon(this.repeater, "click", this.onTriggerClick, this, {\r
+ preventDefault: true\r
+ });\r
+\r
+ this.field.mon(this.trigger, {\r
+ mouseover: this.onMouseOver,\r
+ mouseout: this.onMouseOut,\r
+ mousemove: this.onMouseMove,\r
+ mousedown: this.onMouseDown,\r
+ mouseup: this.onMouseUp,\r
+ scope: this,\r
+ preventDefault: true\r
+ });\r
+\r
+ this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);\r
+\r
+ this.dd.setXConstraint(0, 0, 10)\r
+ this.dd.setYConstraint(1500, 1500, 10);\r
+ this.dd.endDrag = this.endDrag.createDelegate(this);\r
+ this.dd.startDrag = this.startDrag.createDelegate(this);\r
+ this.dd.onDrag = this.onDrag.createDelegate(this);\r
+ },\r
+\r
+ onMouseOver: function(){\r
+ if (this.disabled) {\r
+ return;\r
+ }\r
+ var middle = this.getMiddle();\r
+ this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';\r
+ this.trigger.addClass(this.tmpHoverClass);\r
+ },\r
+\r
+ //private\r
+ onMouseOut: function(){\r
+ this.trigger.removeClass(this.tmpHoverClass);\r
+ },\r
+\r
+ //private\r
+ onMouseMove: function(){\r
+ if (this.disabled) {\r
+ return;\r
+ }\r
+ var middle = this.getMiddle();\r
+ if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||\r
+ ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {\r
+ }\r
+ },\r
+\r
+ //private\r
+ onMouseDown: function(){\r
+ if (this.disabled) {\r
+ return;\r
+ }\r
+ var middle = this.getMiddle();\r
+ this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';\r
+ this.trigger.addClass(this.tmpClickClass);\r
+ },\r
+\r
+ //private\r
+ onMouseUp: function(){\r
+ this.trigger.removeClass(this.tmpClickClass);\r
+ },\r
+\r
+ //private\r
+ onTriggerClick: function(){\r
+ if (this.disabled || this.el.dom.readOnly) {\r
+ return;\r
+ }\r
+ var middle = this.getMiddle();\r
+ var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';\r
+ this['onSpin' + ud]();\r
+ },\r
+\r
+ //private\r
+ getMiddle: function(){\r
+ var t = this.trigger.getTop();\r
+ var h = this.trigger.getHeight();\r
+ var middle = t + (h / 2);\r
+ return middle;\r
+ },\r
+\r
+ //private\r
+ //checks if control is allowed to spin\r
+ isSpinnable: function(){\r
+ if (this.disabled || this.el.dom.readOnly) {\r
+ Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly\r
+ return false;\r
+ }\r
+ return true;\r
+ },\r
+\r
+ handleMouseWheel: function(e){\r
+ //disable scrolling when not focused\r
+ if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {\r
+ return;\r
+ }\r
+\r
+ var delta = e.getWheelDelta();\r
+ if (delta > 0) {\r
+ this.onSpinUp();\r
+ e.stopEvent();\r
+ }\r
+ else\r
+ if (delta < 0) {\r
+ this.onSpinDown();\r
+ e.stopEvent();\r
+ }\r
+ },\r
+\r
+ //private\r
+ startDrag: function(){\r
+ this.proxy.show();\r
+ this._previousY = Ext.fly(this.dd.getDragEl()).getTop();\r
+ },\r
+\r
+ //private\r
+ endDrag: function(){\r
+ this.proxy.hide();\r
+ },\r
+\r
+ //private\r
+ onDrag: function(){\r
+ if (this.disabled) {\r
+ return;\r
+ }\r
+ var y = Ext.fly(this.dd.getDragEl()).getTop();\r
+ var ud = '';\r
+\r
+ if (this._previousY > y) {\r
+ ud = 'Up';\r
+ } //up\r
+ if (this._previousY < y) {\r
+ ud = 'Down';\r
+ } //down\r
+ if (ud != '') {\r
+ this['onSpin' + ud]();\r
+ }\r
+\r
+ this._previousY = y;\r
+ },\r
+\r
+ //private\r
+ onSpinUp: function(){\r
+ if (this.isSpinnable() == false) {\r
+ return;\r
+ }\r
+ if (Ext.EventObject.shiftKey == true) {\r
+ this.onSpinUpAlternate();\r
+ return;\r
+ }\r
+ else {\r
+ this.spin(false, false);\r
+ }\r
+ this.field.fireEvent("spin", this);\r
+ this.field.fireEvent("spinup", this);\r
+ },\r
+\r
+ //private\r
+ onSpinDown: function(){\r
+ if (this.isSpinnable() == false) {\r
+ return;\r
+ }\r
+ if (Ext.EventObject.shiftKey == true) {\r
+ this.onSpinDownAlternate();\r
+ return;\r
+ }\r
+ else {\r
+ this.spin(true, false);\r
+ }\r
+ this.field.fireEvent("spin", this);\r
+ this.field.fireEvent("spindown", this);\r
+ },\r
+\r
+ //private\r
+ onSpinUpAlternate: function(){\r
+ if (this.isSpinnable() == false) {\r
+ return;\r
+ }\r
+ this.spin(false, true);\r
+ this.field.fireEvent("spin", this);\r
+ this.field.fireEvent("spinup", this);\r
+ },\r
+\r
+ //private\r
+ onSpinDownAlternate: function(){\r
+ if (this.isSpinnable() == false) {\r
+ return;\r
+ }\r
+ this.spin(true, true);\r
+ this.field.fireEvent("spin", this);\r
+ this.field.fireEvent("spindown", this);\r
+ },\r
+\r
+ spin: function(down, alternate){\r
+ var v = parseFloat(this.field.getValue());\r
+ var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;\r
+ (down == true) ? v -= incr : v += incr;\r
+\r
+ v = (isNaN(v)) ? this.defaultValue : v;\r
+ v = this.fixBoundries(v);\r
+ this.field.setRawValue(v);\r
+ },\r
+\r
+ fixBoundries: function(value){\r
+ var v = value;\r
+\r
+ if (this.field.minValue != undefined && v < this.field.minValue) {\r
+ v = this.field.minValue;\r
+ }\r
+ if (this.field.maxValue != undefined && v > this.field.maxValue) {\r
+ v = this.field.maxValue;\r
+ }\r
+\r
+ return this.fixPrecision(v);\r
+ },\r
+\r
+ // private\r
+ fixPrecision: function(value){\r
+ var nan = isNaN(value);\r
+ if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {\r
+ return nan ? '' : value;\r
+ }\r
+ return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));\r
+ },\r
+\r
+ doDestroy: function(){\r
+ if (this.trigger) {\r
+ this.trigger.remove();\r
+ }\r
+ if (this.wrap) {\r
+ this.wrap.remove();\r
+ delete this.field.wrap;\r
+ }\r
+\r
+ if (this.splitter) {\r
+ this.splitter.remove();\r
+ }\r
+\r
+ if (this.dd) {\r
+ this.dd.unreg();\r
+ this.dd = null;\r
+ }\r
+\r
+ if (this.proxy) {\r
+ this.proxy.remove();\r
+ }\r
+\r
+ if (this.repeater) {\r
+ this.repeater.purgeListeners();\r
+ }\r
+ }\r
+});\r
+\r
+//backwards compat\r
+Ext.form.Spinner = Ext.ux.Spinner;</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff